<template>
  <div>
    <!--顶部过滤条件-->
    <div style="border-bottom: 1px solid #EEEEEE; ">
      <el-form :model="filterData"  size="mini">
          <el-row :gutter="10">
            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">采购日期:</div>
              <el-date-picker type="daterange" v-model="filterData.daterange" size="mini" start-placeholder="起始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" range-separator="至"
                style="width: 100%;"></el-date-picker>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">采购单号:</div>
              <el-input v-model="filterData.reqcode" placeholder="采购单号"size="mini" clearable></el-input>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">商品名称:</div>
               <el-input v-model="filterData.good" placeholder="商品名称" size="mini" clearable></el-input>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">规格型号:</div>
               <el-input v-model="filterData.model" placeholder="商品规格型号" size="mini" clearable></el-input>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">采购总额:</div>
               <el-input v-model="filterData.sum" placeholder="采购订单总额" size="mini" clearable></el-input>
            </el-col>
            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">销方单位:</div>
               <el-input v-model="filterData.seller" placeholder="销方单位" clearable style="width: 100%;"></el-input>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">收货人:</div>
              <el-autocomplete v-model="filterData.client" placeholder="收货人"  :fetch-suggestions="querySearchClientAsync"
                style="width: 100%;">
              </el-autocomplete>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">客户单位:</div>
              <el-input v-model="filterData.clientname" placeholder="客户单位" style="width: 100%;" clearable>
              </el-input>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
                <div style="width: 80px;">发货状态:</div>
                <el-select v-model="filterData.deliverstatus" placeholder="发货状态" style="width: 100%;" clearable>
                  <el-option label="待发货" value="0"></el-option>
                  <el-option label="已发货" value="1"></el-option>
                </el-select>
             </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">业务员:</div>
               <el-select v-model="filterData.requester" placeholder="业务员" clearable style="width: 100%;" >
                 <el-option v-for="(item,index) in saleman" :label="item.name" :value="item.name" :key="item.id"></el-option>
               </el-select>
            </el-col>



            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">店铺名称:</div>
               <el-input v-model="filterData.shopname" placeholder="店铺名称" size="mini" clearable></el-input>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">进项状态:</div>
               <el-select v-model="filterData.buyticket_bindstatus" placeholder="进项状态" style="width: 100%;"  clearable>
                 <el-option label="不完整" value="0"></el-option>
                 <el-option label="完整" value="1"></el-option>
                </el-select>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">进项票号:</div>
                <el-input v-model="filterData.buyticket_bindnum" placeholder="关联进项发票号" style="width:100%" clearable></el-input>
            </el-col>


            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">销售状态:</div>
               <el-select v-model="filterData.soldstatus" placeholder="销售状态" style="width: 100%;"  clearable>
                 <el-option label="未售" value="0"></el-option>
                 <el-option label="已售" value="1"></el-option>
                 <el-option label="部分" value="2"></el-option>
                </el-select>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">销售单号:</div>
                <el-input v-model="filterData.saleorder" placeholder="关联进项发票号" style="width:100%" clearable></el-input>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">付款状态:</div>
               <el-select v-model="filterData.paidstatus" placeholder="支付状态" style="width:100%" clearable>
                 <el-option label="未支付" value="0"></el-option>
                 <el-option label="部分支付" value="2"></el-option>
                 <el-option label="已支付" value="1"></el-option>
               </el-select>
            </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">采购途径:</div>
             <el-select allow-create v-model="filterData.buyroute" clearable placeholder="采购途径" style="width: 100%;">
               <el-option label="京东自营" value="京东自营"></el-option>
               <el-option label="京东慧采" value="京东慧采"></el-option>
               <el-option label="天猫" value="天猫"></el-option>
               <el-option label="淘宝" value="淘宝"></el-option>
               <el-option label="1688" value="1688"></el-option>
               <el-option label="工品优选" value="工品优选"></el-option>
               <el-option label="线下门店" value="线下门店"></el-option>
               <el-option label="其他" value="其他"></el-option>
             </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
              <div style="width: 80px;">付款方式:</div>
                <el-select v-model="filterData.paytype" placeholder="付款方式" style="width: 100%;" clearable>
                  <el-option label="对公转账" value="对公转账"></el-option>
                  <el-option label="微信支付" value="微信支付"></el-option>
                  <el-option label="支付宝" value="支付宝"></el-option>
                  <el-option label="现金" value="现金"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-col>



            <el-col style="width: 280px;display: flex;line-height: 32px;">
                <div style="width: 80px;">发票类型:</div>
                <el-select v-model="filterData.tickettype" placeholder="发票类型" style="width: 100%;" clearable>
                  <el-option label="无票" value="无票"></el-option>
                  <el-option label="普通发票" value="普通发票"></el-option>
                  <el-option label="增值税专票" value="增值税专票"></el-option>
                </el-select>
             </el-col>

           <el-col style="width: 280px;display: flex;line-height: 32px;">
               <div style="width: 80px;">采购备注:</div>
                <el-input v-model="filterData.memo" placeholder="采购备注" clearable style="width: 100%;"></el-input>
            </el-col>


            <el-col style="width: 280px;display: flex;line-height: 32px;">
                <div style="width: 80px;">所属账套:</div>
                <el-select v-model="filterData.account" filterable placeholder="账套" style="width: 100%;" clearable>
                  <el-option :label="item.name" :value="item.name" v-for="(item,index) in accounts" :key="index"></el-option>
                </el-select>
             </el-col>

             <el-col style="width: 280px;display: flex;line-height: 32px;">
                 <div style="width: 80px;">包含取消:</div>
                 <el-checkbox v-model="filterData.containcancel">是</el-checkbox>
              </el-col>

            <el-col style="width: 120px;">
              <el-form-item label-width="0px">
                <el-button type="primary" icon="el-icon-search" style="width: 100%;" @click="handleQuery">查询</el-button>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
    </div>
    <div>

    </div>
    <div>
      <div  style="display: flex;">
        <div style="flex: 1;"></div>
        <div style="margin-bottom:2px;">
          <el-popconfirm @confirm="handleExport();" :title="selection.length>0? '确定要导出选中项？ (共'+selection.length+'条）？':'确定要导出全部查询明细（共'+numrows+'条)？'">
            <el-button type="primary" slot="reference" size="mini" icon="el-icon-download" :loading="exporting">
              {{selection.length>0? "导出选中项":"导出全部"}}
            </el-button>
          </el-popconfirm>

        </div>
      </div>
      <div class="table-wraper">
        <el-table border :data="tableData" ref="mtable" height="100%" @row-click="handleRowClick" :header-cell-style="{'background-color': '#f5f7f9','color':'#3e3e3e',border:'1px solid #e5e5e5'}"
          empty-text="暂无采购记录"  @select="handleSelection" @select-all="handleSelection">
          <el-table-column label="序号" type="index" width="50px" align="center" fixed="left"></el-table-column>
          <el-table-column type="selection" align="center" width="50px" fixed="left"></el-table-column>
          <el-table-column label="状态" align="center" width="80px">
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handleShowStatus(scope.$index,scope.row)">
                <span v-if="scope.row.closed==1" >已取消</span>
                <span v-if="scope.row.closed==0" >正常</span>
                <i v-if="scope.row.closedmemo!=''" class="el-icon-info" style="color: #E74C3C;" :title="scope.row.closedmemo"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="申请日期" prop="req_date" width="100px" align="center" >
            <template v-slot="scope">
              {{scope.row.reqdate.split(" ")[0]}}
            </template>
          </el-table-column>
          <el-table-column label="采购单号" prop="reqcode" width="110px" align="center" >
            <template v-slot="scope">
              <el-popconfirm @confirm="filterData.reqcode=scope.row.reqcode;loadDataList();" title="查看此付款单号?">
                <span slot="reference" style="cursor: pointer;">{{scope.row.reqcode}}</span>
              </el-popconfirm>
            </template>
          </el-table-column>

          <el-table-column label="付款状态" prop="paidstatus" align="center" width="80px" >
            <template v-slot="scope">
              <span v-if="scope.row.paidstatus==0" style="color: #fdfdfd;background-color: #E74C3C; padding: 2px 5px;">未支付</span>
              <span v-if="scope.row.paidstatus==1" style="color: #fdfdfd;background-color: #55aa00; padding: 2px 5px;">已支付</span>
              <span v-if="scope.row.paidstatus==2 " style="color: #fdfdfd;background-color: #e69900; padding: 2px 5px;">部分支付</span>
            </template>
          </el-table-column>

          <el-table-column label="供应商名称" prop="seller" width="180px" show-overflow-tooltip></el-table-column>
          <el-table-column label="商品名称" prop="title" width="140px" show-overflow-tooltip></el-table-column>
          <el-table-column label="品牌" prop="brand" width="50px" show-overflow-tooltip></el-table-column>
          <el-table-column label="规格型号" prop="model" show-overflow-tooltip></el-table-column>
          <el-table-column label="单位" prop="unit" width="60" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column label="数量" prop="count" align="center" width="80px">
            <template v-slot="scope">
               {{parseFloat(scope.row.count).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column label="采购单价" prop="price" align="center" width="100px">
            <template slot="header">
              <div style="text-align: center">单价</div>
            </template>
            <template v-slot="scope">
              {{parseFloat(scope.row.price).toFixed(4)}}
            </template>
          </el-table-column>
          <el-table-column label="采购总额" prop="total" width="100px" align="center">
            <template slot="header">
              <div style="text-align: center;">采购总额</div>
            </template>
            <template v-slot="scope">
              {{parseFloat(scope.row.total).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column label="发票类型" prop="tickettype" align="center" width="100px">
            <template v-slot="scope">
              {{scope.row.tickettype}}
            </template>
          </el-table-column>
          <el-table-column label="运费" prop="yunfei" show-overflow-tooltip></el-table-column>
          <el-table-column label="商品备注" prop="dmemo" show-overflow-tooltip>
            <template v-slot="scope">
              {{scope.row.memo}}/{{scope.row.dmemo}}
            </template>
          </el-table-column>
          <el-table-column label="退换货" width="60px" align="center" >
            <template v-slot="scope">
              <span v-if="scope.row.dreturn_status=='1'" style="background-color: #FF0000;color:#FFFFFF;padding:2px 5px; cursor: pointer;" @click="showCancelDetail(scope.$index,scope.row)">有</span>
              <span v-if="scope.row.dreturn_status=='0'">/</span>
            </template>
          </el-table-column>
          <el-table-column label="客户" prop="client" align="center" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="客户单位" prop="clientname" align="center" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="申请人" prop="requester" align="center" width="70px" show-overflow-tooltip></el-table-column>
          <el-table-column label="发货状态" align="center">
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handleDeliverInfo(scope.$index,scope.row)">
                <span v-if="scope.row.deliver.status==0" style="color: #E74C3C;">待发货</span>
                 <span v-if="scope.row.deliver.status==1" style="color: #55aa00;">已发货</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="进项">
            <template slot="header"><div style="text-align: center;">进项票状态</div></template>
            <el-table-column label="差额" prop="unbindsum" align="center" width="90px">
              <template v-slot="scope">
                <span v-if="scope.row.unbindsum>0" style="color: #FF0000;">{{scope.row.unbindsum.toFixed(2)}}</span>
                <span v-if="scope.row.unbindsum<=0">{{scope.row.unbindsum.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="buyticketstatus" width="80px" align="center">
              <template v-slot="scope">
                <div style="cursor: pointer;" @click="handleSingleEditTicket(scope.$index,scope.row)">
                  <span v-if="scope.row.buyticketstatus==0" style="color: #ff5500" >不完整</span>
                  <span v-if="scope.row.buyticketstatus==1" style="color: #55aa00">已完整</span>
                  <span class="el-icon-info" v-if="scope.row.buyticketmemo!=''" style="cursor: pointer;" :title="'备注:'+scope.row.buyticketmemo"></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="进项票号" prop="buyticketnums" align="center" show-overflow-tooltip></el-table-column>

          </el-table-column>
          <el-table-column label="销售状态" align="center">
            <el-table-column label="状态" align="center" width="60px">
                <template v-slot="scope">
                  <span v-if="scope.row.cost_soldstatus==0" style="color: #E74C3C;">未售</span>
                  <span v-if="scope.row.cost_soldstatus==1" style="color: #55aa00;">已售</span>
                  <span v-if="scope.row.cost_soldstatus==2" style="color: #55aa00;" :title="'已售数量:'+scope.row.cost_bindcount+'/'+scope.row.count">部分</span>
                </template>
            </el-table-column>
            <el-table-column label="关联销售订单号" prop="cost_bindorders" show-overflow-tooltip width="120px" align="center" show-overflow-tooltip>
            </el-table-column>
          </el-table-column>

          <el-table-column label="付款方式" prop="paytype" width="90px" align="center"></el-table-column>
          <el-table-column label="采购途径" prop="buyroute" show-overflow-tooltip width="80px" align="center">
          </el-table-column>
          <el-table-column label="店铺名称" prop="shopname" show-overflow-tooltip>
            <template v-slot="scope">
              <a v-if="scope.row.shopurl" :href="scope.row.shopurl" target="_blank">{{scope.row.shopname}}</a>
              <span v-if="scope.row.shopurl==''">{{scope.row.shopname}}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属账套" prop="buyer" width="150px" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="80px" fixed="right" align="center">
            <template v-slot="scope">
              <el-button-group>
                 <el-button icon="el-icon-goods" size="mini" circle title="设置销售状态" @click="handleEditSaleStatus(scope.$index,scope.row)"></el-button>
                <el-button v-if="scope.row.ticket_attach.length>0" title="查看辅件" size="mini" circle icon="el-icon-link" @click="handleViewAttach(scope.row)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex;">
        <div style="flex: 1; line-height: 45px;">
          <span style="margin-right: 20px;">采购总额: {{sumpage}}</span>
          <span style="margin-right: 20px;">进项票差额:{{parseFloat(sumpage-sumbind).toFixed(2)}}</span>
          <span style="margin-right: 20px;">选中采购总额:{{parseFloat(sum_selection).toFixed(2)}}</span>
          <span style="margin-right: 20px;">选中进项差额:{{(parseFloat(sum_selection)-parseFloat(sum_selection_bind)).toFixed(2)}}</span>
          <span style="margin-right: 20px;">选中数量: {{parseFloat(sumcount).toFixed(2)}}</span>


        </div>
        <div style="margin-top: 10px; text-align: right;">
          <el-pagination class="pagination" prev-text="上一页" next-text="下一页"
            layout=" prev, pager, next,sizes,total" :page-sizes="[10, 20, 30,50,100]" :total="numrows" :page-size="pagesize"
            :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="14">
             <div class="title">已关联进项发票</div>
              <div style="height: 150px;overflow-y: auto;">
                   <el-table :data="buyticketlist" empty-text="请点击上方采购明细查看" border highlight-current-row height="100%">
                   <el-table-column label="序号" type="index"></el-table-column>
                   <el-table-column label="发票类型" prop="type" width="140px">
                       <template v-slot="scope">
                          {{scope.row.type}}({{scope.row.rate*100}}%)
                       </template>
                   </el-table-column>
                   <el-table-column label="进项发票号" prop="buyticketnum" show-overflow-tooltip></el-table-column>
                   <el-table-column label="税收类目及名称" prop="taxname" show-overflow-tooltip>
                     <template v-slot="scope">
                       *{{scope.row.taxname}}*{{scope.row.title}}
                     </template>
                   </el-table-column>
                   <el-table-column label="规格型号" prop="model" show-overflow-tooltip align="center"></el-table-column>
                   <el-table-column label="金额" prop="amount" width="100px" align="center"></el-table-column>
                   <el-table-column label="备注" prop="dmemo" width="80px"  align="center"></el-table-column>
                   <el-table-column label="销售单位" prop="seller"  align="center" show-overflow-tooltip></el-table-column>
                 </el-table>
              </div>
              <div style="height: 35px; line-height: 35px; text-align: right; margin-right: 20px;">
                <div>
                  <span style="margin-right: 20px;">已绑定进项票总额:{{curbindsum.toFixed(2)}}</span>
                  <span>进项差额:{{curunbindsum.toFixed(2)}}</span>
                 </div>
              </div>
          </el-col>
          <el-col :span="10">
            <div class="title">销售订单</div>
            <div>
                <div v-if="orderlist.length==0">无相关销售订单</div>
                <el-table v-if="orderlist.length>0" :data="orderlist" width="100%" border>
                  <el-table-column label="序号" type="index"></el-table-column>
                  <el-table-column label="下单渠道" prop="platform"></el-table-column>
                  <el-table-column label="销售订单号" prop="ordercode"></el-table-column>
                  <el-table-column label="客户名称" prop="clientname"></el-table-column>
                  <el-table-column label="订单总额" prop="sum_order"></el-table-column>
                </el-table>
            </div>
          </el-col>
        </el-row>


      </div>
    </div>
    <MultiTicketUI ref="multiTicketUI" v-if="multiTiketVisible" ></MultiTicketUI>
    <EditUI ref="editUI" v-if="editVisible"   @complete="handleBindCallback"></EditUI>
    <AttachUI ref="attachUI" v-if="attachVisible"></AttachUI>
    <BindBuyTicketUI ref="bindBuyTicketUI" v-if="bindBuyTicketVisible" />
    <SaleUI ref="saleUI" v-if="saleeditVisible"></SaleUI>
    <ReturnUI ref="returnUI" v-if="returnVisible"></ReturnUI>
    <DeliverUI ref="deliverUI" v-if="deliverVisible"></DeliverUI>
  </div>
</template>

<script>
  import EditUI from './edit.vue';
  import AttachUI from '@/components/attachviewer.vue'
  import BindBuyTicketUI from './buyticketfilter.vue'
  import SaleUI from './saleui.vue';
  import ReturnUI from '../buylist/canceldetail.vue';
  import DeliverUI from './deliver.vue';

  export default {
    components: {
      EditUI,
      BindBuyTicketUI,
      AttachUI,
      SaleUI,
      DeliverUI,
      ReturnUI
    },
    data() {
      return {
        filterData: {
          daterange: '',
          reqcode: '',
          good: '',
          requester: '',
          client: '',
          clientname:'',
          paidstatus: '',
          supuname: '',
          buyticket_status:'',
          buyticket_bindnum:'',
          buyticket_bindstatus:'',
          sum: '',
          buyroute: '',
          deliverstatus:'',
          model:'',
          buytype: '',
          paytype: '',
          account:'',
          tickettype: '',
          saleorder:'',
          soldstatus:'',
          soldorders:'',
          buynum:'',
          containcancel:true,
          memo: '',
          closed:''
        },
        saleman:[],
        accounts:[],
        sumcount:0,
        sum_selection:0,
        sum_selection_bind:0,
        editTableIndex:-1,
        buyticketlist:[],
        orderlist:[],
        currentRow:null,
        selection: [],
        sumtotal: 0,
        sumpage: 0,
        sumbind:0,
        tableData: [],
        curpage: 1,
        pagesize: 10,
        numrows: 1,
        createVisible: false,
        editVisible: false,
        bindBuyTicketVisible:false,
        multiTiketVisible: false,
        editSingleTicketVisible:false,
        attachVisible:false,
        curbindsum:0,
        curunbindsum:0,
        saleeditVisible:false,
        returnVisible:false,
        deliverVisible:false,
        exporting:false,
      }
    },
    mounted() {
      var now= new Date();
      var firstDay=this.formatDate(new Date(now.getFullYear(),now.getMonth(),1));
      var lastDay=this.formatDate(new Date(now.getFullYear(),now.getMonth()+1,0));
      this.filterData.daterange = [firstDay,lastDay];

      this.loadSaleman();
      this.loadDataList();
      this.loadAccount();
    },
    methods: {
      formatDate(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
        const dd = String(date.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
      },
      getCurrentDate(n) {
            var dd = new Date();
            if (n) {
              dd.setDate(dd.getDate() - n);
            }
            var year = dd.getFullYear();
            var month =
              dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
            var day = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
            return year + "-" + month + "-" + day;
          },
      handleExport(){
        if(this.selection.length>0){
          //导出选中
          var index=1;
          let slist=this.selection.map((item)=>{
           let obj={
             "序号":index,
             "采购日期":item.reqdate,
             "采购单号":item.reqcode,
             "支付状态":item.paidstatus==1? "已支付":(item.paidstatus==0? "待支付":"部分支付"),
             "采购途径":item.buyroute,
             "供应商":item.paytype,
             "商品名称":item.title,
             "品牌":item.brand,
             "规格型号":item.model,
             "单位":item.unit,
             "数量":item.count,
             "单价":item.price,
             "总价":item.total,
             "发票类型":item.tickettype,
             "运费":item.yunfei,
             "商品备注":item.dmemo,
             "是有退换货": item.dreturn_status==1? '有':"/",
             "发货状态":item.deliver.status==0?"待发货":"已发货",
             "物流信息":item.deliver.name+"-"+item.deliver.num,
             "收货信息":item.receiverinfo,
             "客户单位":item.clientname,
             "采购员":item.requester,
             "进项状态":item.buyticket_status==0?'不完整':'完整',
             "进项差额":item.unbindsum,
             "进项票号":item.buyticket_nums,
             "销售状态":item.cost_soldstatus==0? "未售":(item.cost_soldstatus==1?"已售":"部分售出"),
             "销项发票号":'',
             "付款方式":item.paytype,
             "采购途径":item.buyroute,
             "店铺名称":item.shopname,
             "店铺链接":item.shopurl,
             "所属账套":item.buyer,
            }
             index++;
             return obj;
           });
          let ws= XLSX.utils.json_to_sheet(slist,{skipHeader:false});
             ws["!cols"]=[{wpx:90}];
             let wb=XLSX.utils.book_new();
             XLSX.utils.book_append_sheet(wb,ws,'采购明细');
             XLSX.writeFile(wb,"导出采购明细.xlsx");
        }else{
            this.exporting=true;
            const params = {
              daterange: this.filterData.daterange,
              reqcode: this.filterData.reqcode,
              good: this.filterData.good,
              model:this.filterData.model,
              requester: this.filterData.requester,
              client: this.filterData.client,
              clientname:this.filterData.clientname,
              seller:this.filterData.seller,
              paidstatus: this.filterData.paidstatus,
              shopname:this.filterData.shopname,
              curpage: this.curpage,
              pagesize: this.pagesize,
              supname: this.filterData.supname,
              sum: this.filterData.sum,
              buynum:this.filterData.buynum,
              buyroute: this.filterData.buyroute,
              deliverstatus:this.filterData.deliverstatus,
              buytype: this.filterData.buytype,
              paytype: this.filterData.paytype,
              account:this.filterData.account,
              containcancel:this.filterData.containcancel? 1:0,
              buyticket_bindstatus:this.filterData.buyticket_bindstatus,
              buyticket_bindnum:this.filterData.buyticket_bindnum,
              bind_buyticketstatus:this.filterData.bind_buyticketstatus,
              tickettype: this.filterData.tickettype,
              saleorder:this.filterData.saleorder,
              soldstatus:this.filterData.soldstatus,
              memo: this.filterData.memo
            };
            const _this=this;
            this.axios.post("api/admin/buydetail/export", params).then(res => {
              if (res.status == 200 && res.data.code) {
                  _this.exporting=false;

                  var index=1;
                  let slist=res.data.list.map((item)=>{
                   let obj={
                     "序号":index,
                     "采购日期":item.reqdate,
                     "采购单号":item.reqcode,
                     "支付状态":item.paidstatus==1? "已支付":(item.paidstatus==0? "待支付":"部分支付"),
                     "采购途径":item.buyroute,
                     "供应商":item.paytype,
                     "商品名称":item.title,
                     "品牌":item.brand,
                     "规格型号":item.model,
                     "单位":item.unit,
                     "数量":item.count,
                     "单价":item.price,
                     "总价":item.total,
                     "发票类型":item.tickettype,
                     "运费":item.yunfei,
                     "商品备注":item.dmemo,
                     "是有退换货": item.dreturn_status==1? '有':"/",
                     "收货信息":item.receiverinfo,
                     "客户单位":item.clientname,
                     "采购员":item.requester,
                     "进项状态":item.buyticket_status==0?'不完整':'完整',
                     "进项差额":item.unbindsum,
                     "进项票号":item.buyticket_nums,
                     "销售状态":item.cost_soldstatus==0? "未售":(item.cost_soldstatus==1?"已售":"部分售出"),
                     "销项发票号":'',
                     "付款方式":item.paytype,
                     "采购途径":item.buyroute,
                     "店铺名称":item.shopname,
                     "店铺链接":item.shopurl,
                     "所属账套":item.buyer,
                    }
                     index++;
                     return obj;
                   });
                  let ws= XLSX.utils.json_to_sheet(slist,{skipHeader:false});
                     ws["!cols"]=[{wpx:90}];
                     let wb=XLSX.utils.book_new();
                     XLSX.utils.book_append_sheet(wb,ws,'采购明细');
                     XLSX.writeFile(wb,"导出采购明细.xlsx");
              }
            });

        }
      },
      handleDeliverInfo(index,data){
        this.deliverVisible=true;
        this.$nextTick(()=>{
          this.$refs.deliverUI.dialogVisible=true;
          this.$refs.deliverUI.init(index,JSON.parse(JSON.stringify(data)));
        })
      },
      querySearchClientAsync(str,cb){
        this.axios.post("api/admin/clientuser/filter", {
          username: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },
      loadSaleman(){
        this.axios.post("api/admin/mate/list_op").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.saleman = res.data.list;
          }
        })
      },
      loadAccount(){
        this.axios.post("api/admin/account/list").then(res=>{
          if(res.status==200&& res.data.code==0){
             this.accounts=res.data.list;
          }
        })
      },
      showCancelDetail(index,data){
        this.returnVisible=true;
        this.$nextTick(()=>{
          this.$refs.returnUI.dialogVisible=true;
          this.$refs.returnUI.initData(data.reqcode);
        })
      },
      handleSelection(list){
        this.selection=list;
         this.sum_selection=0;
         this.sum_selection_bind=0;
         this.sumcount=0;
        list.forEach(item=>{
          this.sum_selection_bind+=parseFloat(item.salebind_sum);
          this.sum_selection+=parseFloat(item.total);
          this.sumcount+=parseFloat(item.count);
        })
      },
       handleBindCallback(index,data){
          this.loadDataList();
      },
      handleRowClick(row,column,event){
        this.axios.post("api/admin/buydetail/get_buyticket_by_id", {
          id: row.did
        }).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.buyticketlist = res.data.list;
            this.curbindsum=res.data.bindsum;
            this.curunbindsum=res.data.unbindsum;
          }
        })
        this.axios.post("api/admin/buydetail/get_bind_orders",{id:row.did}).then(res=>{
          if(res.status==200 &&res.data.code==1){
            this.orderlist=res.data.list;
          }
        })
      },
      handleRowSelect(row, column, event) {
        if (this.currentRow) {
          if (this.currentRow.id === row.id) {
            //this.currentRow = null;
          } else {
            this.currentRow = row;
          }
        } else {
          this.currentRow = row;
        }
      },
      handleBindBuyTicket(index,row){
          this.bindBuyTicketVisible=true;
          this.$nextTick(()=>{
            this.$refs.bindBuyTicketUI.dialogVisible=true;
            this.$refs.bindBuyTicketUI.initData(index,JSON.parse(JSON.stringify(row)));
          })
      },
      handleViewAttach(data){
        this.attachVisible=true;
        this.$nextTick(()=>{
           this.$refs.attachUI.dialogVisible=true;
           this.$refs.attachUI.init(JSON.parse(JSON.stringify(data.ticket_attach)));
        })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          daterange: this.filterData.daterange,
          reqcode: this.filterData.reqcode,
          good: this.filterData.good,
          model:this.filterData.model,
          requester: this.filterData.requester,
          client: this.filterData.client,
          clientname:this.filterData.clientname,
          seller:this.filterData.seller,
          paidstatus: this.filterData.paidstatus,
          shopname:this.filterData.shopname,
          curpage: this.curpage,
          pagesize: this.pagesize,
          supname: this.filterData.supname,
          sum: this.filterData.sum,
          buynum:this.filterData.buynum,
          buyroute: this.filterData.buyroute,
          deliverstatus:this.filterData.deliverstatus,
          buytype: this.filterData.buytype,
          paytype: this.filterData.paytype,
          account:this.filterData.account,
          containcancel:this.filterData.containcancel? 1:0,
          buyticket_bindstatus:this.filterData.buyticket_bindstatus,
          buyticket_bindnum:this.filterData.buyticket_bindnum,
          bind_buyticketstatus:this.filterData.bind_buyticketstatus,
          tickettype: this.filterData.tickettype,
          saleorder:this.filterData.saleorder,
          soldstatus:this.filterData.soldstatus,
          memo: this.filterData.memo
        };
        this.axios.post("api/admin/buydetail/list_by_page", params).then(res => {
          if (res.status == 200 && res.data.code) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
            this.sum = res.data.sum;
            this.sumtotal = res.data.sumtotal;
            this.sumpage = res.data.sumpage;
            this.sumbind=res.data.sumbind;
           }
        })
      },
      handleCreate() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
          this.$refs.createUI.initData();
        })
      },
      handleSelectDetail(selection) {
        this.selection = selection;
        console.log(this.selection);
      },
      handleEditSaleStatus(index,data){
        this.saleeditVisible=true;
        this.$nextTick(()=>{
          this.$refs.saleUI.dialogVisible=true;
          this.$refs.saleUI.initData(index,JSON.parse(JSON.stringify(data)));
        })
      },
      handleSingleEditTicket(index,data){
        this.editVisible=true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.initData(index,JSON.parse(JSON.stringify(data)));
        })
      },
      handleQuery() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleCreateCallback() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleEdit(index, row) {
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.initData(index, JSON.parse(JSON.stringify(row)));
        })
      },
      handleEditCallback(index, data) {
        this.tableData[index].buytype = data.buytype;
        this.tableData[index].buyroute = data.buyroute;
        this.tableData[index].supname = data.supname;
        this.tableData[index].shopname = data.shopname;
        this.tableData[index].shopurl = data.shopurl;
        this.tableData[index].tickettype = data.tickettype;
        this.tableData[index].ticketrate = data.ticketrate;
        this.tableData[index].yunfei = data.yunfei;
        this.tableData[index].paytype = data.paytype;
        this.tableData[index].sum = data.sum;
        this.tableData[index].client = data.client;
        this.tableData[index].requester = data.requester;
        this.tableData[index].paidstatus = data.paidstatus;
        this.tableData[index].pay_date = data.pay_date;
        this.tableData[index].attach_buy = data.attach_buy;
        this.tableData[index].goods = data.goods;
      }
    }
  }
</script>

<style scoped type="scss">
  .table-wraper {
    height: calc(100vh - 520px);
  }
</style>
